<template>
  <div
    :style="{ paddingTop: `${searchBarTop}px` }"
    class="healthProgramme relative box-border pt-80rpx">
    <image
      :src="`${cdnUrl}/imgs/noOpen/bg.png${imgVersion}`"
      mode="scaleToFill"
      class="pointer-events-none absolute left-0 right-0 top-0 min-h-screen w-100% -z-9"
    />
    <div
      @click="goback">
      <div class="z-999 mb-46rpx ml-24rpx flex items-center">
        <uni-icons type="back" size="28" />
      </div>
    </div>
    <div class="box-border px-32rpx">
      <div class="font-alimamaShuHeiTi mb-30rpx text-40rpx font-600 text-hex-333333">
        测完可获得专属定制营养方案
      </div>
      <div class="mb-68rpx text-28rpx text-hex-7C8699"><text class="font-numberFont text-40rpx text-hex-ff4d4e">{{ testedAmount }}</text>人测试过</div>
    </div>
    <!-- <div class="relative box-border border-4rpx border-hex-FFFFFF rounded-t-32rpx border-solid from-[rgba(255,255,255,0.6)] to-[rgba(249,249,251,0.5)] bg-gradient-to-b p-32rpx"> -->
    <div class="relative box-border p-32rpx">
      <image
        :src="`${cdnUrl}/imgs/healthProgramme/health.png${imgVersion}`"
        mode="scaleToFill"
        class="absolute right-32rpx h-178rpx w-182rpx -top-120rpx"
      />
      <div class="btn-theme-bg rounded-t-32rpx p-32rpx pb-20rpx"
           style="background: linear-gradient(176deg, #5CDF79 0%, #ABCD05 100%);">
        <div class="font-alimamaShuHeiTi mb-12rpx text-32rpx font-600">
          测前须知
        </div>
        <div class="pb-36rpx text-24rpx">在做题过程中，请注意一下几点</div>
      </div>

      <div class="relative box-border w-100% rounded-40rpx from-hex-F9F9FB to-hex-fff bg-gradient-to-b p-30rpx -top-32rpx">
        <div class="mb-56rpx box-border border-2rpx border-hex-abcd03 rounded-24rpx border-dotted px-25rpx py-56rpx">
          <div>
            <div class="mb-56rpx flex justify-between">
              <div class="mr-12rpx mt-15rpx h-10rpx w-10rpx rounded-50% bg-hex-ff4d4e">&nbsp;</div>
              <div class="w-100% text-30rpx text-hex-333333">请仔细阅读题目，理解题意后选择最符合的选项，答案没有对错之分，请根据您一周内的实际情况作答即可，您的作答将得到严格保密。</div>
            </div>
            <div class="flex justify-between">
              <div class="mr-12rpx mt-15rpx h-10rpx w-10rpx rounded-50% bg-hex-ff4d4e">&nbsp;</div>
              <div class="w-100% text-30rpx text-hex-333333">
                请您针对每个问题所涉及的主观体验进行评估，为每道问题选择最适合您的情况。答案无正确与错误或好与坏之分，请按照您的真实情况来描述您自己。
              </div>
            </div>
          </div>
        </div>
        <div class="mb-150rpx flex justify-between">
          <button
            open-type="share" data-name="inviteFriends"
            class="box-border h-80rpx border-2rpx border-hex-abcd03 rounded-80rpx border-solid text-center text-28rpx leading-80rpx text-hex-abcd03">
            邀请好友一起测</button>
          <div class="btn-theme-bg rounded-80rpx px-110rpx py-18rpx text-28rpx text-hex-FFFFFF" @click="gohealthDetail">开始测试</div>
        </div>
        <div class="text-center text-28rpx font-600 text-hex-333" @click="navTo('/pages-health/healthEvaluationRecords')">测评记录</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
//生成小程序码
onShareAppMessage((res) => {
  if (res.from === 'button' && res.target.dataset.name === 'inviteFriends') {
    return {
      title: '欢迎来到心悦健康频道',
      path: '/pages/health',
    }
  }
  return { title: '心悦' }
})
onShareTimeline(() => {
  return {
    title: '分享朋友圈',
  }
})
const gohealthDetail = () => {
  uni.navigateTo({
    url: '/pages-health/healthDetail',
  })
}
let searchBarTop: any = $ref('24')
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
})
const goback = () => {
  uni.reLaunch({
    url: '/pages/health',
  })
}
let testedAmount = $ref(0)
const getTestedAmount = async () => {
  const { data, status, error } = await Fetch('/qqyapi/health/evaluations/totalNumberOfPeople')
  if (status !== 200 || data.code !== 0) {
    return
  }
  testedAmount = data.result

}

onMounted(() => {
  getTestedAmount()
})
</script>

<style lang="scss" scoped>

.healthProgramme{
  .font-alimamaShuHeiTi{
    font-family:alimamaShuHeiTi;
  }

  .font-numberFont{
    font-family:'DingTalk JinBuTi';
  }
}
</style>
